import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  TextInput,
  Platform,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';

/* 组件 */
import AreaView from '../../components/Layout/AreaView';

/* 样式 */
import styles from './style';

const Search = (props) => {
  const navigation = useNavigation();
  const [historys, setHistorys] = useState([1, 2, 3, 4, 5]);

  useEffect(() => {
    navigation.setOptions({
      title: '搜索',
    });
  });

  return (
    <AreaView>
      <View style={styles.searchs}>
        <View
          style={[
            styles.search_seo,
            Platform.OS === 'android' ? {height: 40} : {},
          ]}>
          <TextInput
            style={[
              styles.span1,
              styles.pl26,
              {backgroundColor: 'rgba(204, 204, 204, .5)', borderRadius: 18},
            ]}
            placeholder="请输入搜索关键词"
          />
          <TouchableOpacity  activeOpacity={1} style={{height: '100%', paddingLeft: 16}}>
            <Text
              style={[
                styles.search_seo_text,
                Platform.OS === 'android' ? {lineHeight: 40} : {},
              ]}>
              搜索
            </Text>
          </TouchableOpacity>
        </View>
        <View style={styles.search_content_header}>
          <Text style={[styles.span1, styles.f24, styles.fw]}>搜索历史</Text>
          <TouchableOpacity>
            <Image
              source={require('../../assets/images/del.png')}
              style={styles.del}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.search_content}>
          {historys?.map((item, index) => {
            return (
              <TouchableOpacity
                key={index}
                style={{
                  position: 'relative',
                  width: '22%',
                  marginBottom: 15,
                  marginRight: 10,
                }}>
                <Text style={styles.f24}>关键字搜索</Text>
                <View
                  style={{
                    width: 1,
                    height: 10,
                    position: 'absolute',
                    right: 0,
                    top: '50%',
                    marginTop: -5,
                    backgroundColor: '#666',
                  }}
                />
              </TouchableOpacity>
            );
          })}
        </View>
      </View>
    </AreaView>
  );
};

export default Search;
